<template>
  <div class="container learnstyle-page">
    <el-row class="grid-head"></el-row>
    <el-row>
      <div>
        <div class="subject">
          <div id="nav">
            <a @click="selectSubject(null)" :class="selectId === 0 ? 'on' : ''">全部</a>
            <a v-for="subject in studentSubjectList"
               :key="subject.id"
               :class="subject.id === selectId ? 'on' : ''"
               @click="selectSubject(subject)" >{{subject.name}}</a>
          </div>
        </div>

        <div class="exam_list">
          <el-card v-if="hasData" v-for="(examInfo, index) in studentExamList" :key="index" class="box-card">
            <div slot="header" class="clearfix">
              <span>{{examInfo.testPaperInfoName}}</span>
            </div>
            <div class="text item">
              科目：  <el-tag>{{examInfo.subjectName}}</el-tag>
            </div>

            <div class="text item">
              试题数量： {{examInfo.questionNumber}}题
            </div>

            <div class="text item">
              试卷总分： {{examInfo.testPaperInfoMark}}分
            </div>

            <div class="text item">
              参考时间： {{examInfo.createDate}}
            </div>

            <div  class="text item">
              考试用时： {{examInfo.examTime}}
            </div>

            <div class="text item">
              系统评分： {{examInfo.systemMark}}分
            </div>

            <div v-if="examInfo.correctFlag === 1" style="border-bottom: 1px solid #EBEEF5" class="text item">
              最终得分： <el-tag type="danger">{{examInfo.systemMark + examInfo.teacherMark}}分</el-tag>
            </div>

            <div v-else style="border-bottom: 1px solid #EBEEF5" class="text item">
              最终得分： <el-tag type="danger">待批改</el-tag>
            </div>

            <div class="text item">
              <el-button
                @click="lookExam(examInfo.id)"
                style="float: right; font-size: 18px" type="text">查看试卷</el-button>
            </div>
          </el-card>

         <el-card v-if="!hasData" class="no_data">
            <i class="el-icon-takeaway-box"></i> 暂无考试记录
          </el-card>
        </div>
      </div>
    </el-row>

    <div class="block">
      <el-pagination
        background
        v-if="totalCount > pageSize"
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="currentExamChangeHandler"
        layout="prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>
<script>

  export default {
    name: 'exam',
    data () {
      return {
        hasData: true,
        selectId: 0,
        studentExamList: [],
        studentSubjectList: [],
        currentPage: 1,
        pageSize: 9,
        totalCount: 0,
        subjectId: ''
      }
    },

    mounted () {
      this.getStudentSubjectList()
      this.getExamInfoList()
    },

    watch: {
      /*studentExamList (val) {
        if (val.length > 0) {
          this.hasData = true
        } else {
          this.hasData = false
        }
      }*/
    },

    destroyed () {

    },

    methods: {

      getExamInfoList () {
        this.axios.get(this.$httpApi.httpUrl('/student/exam'), {
          params: {
            pageNumber: this.currentPage,
            pageSize: this.pageSize,
            subjectId: this.subjectId
          }
        }).then(response => {
          this.studentExamList = response.data.data.dataList
          if (this.studentExamList.length == 0) {
            this.hasData = false
          } else {
            this.hasData = true
          }
          this.totalCount = response.data.data.total
        })
      },

      currentExamChangeHandler (val) {
        this.currentPage = val
        this.getExamInfoList()
      },

      selectSubject (subject) {
        if (subject) {
          this.selectId = subject.id
          this.subjectId = subject.id
        } else {
          this.selectId = 0
          this.subjectId = ''
        }
        this.getExamInfoList()
      },


      // 获取学员学习科目
      getStudentSubjectList () {
        this.axios.get(this.$httpApi.httpUrl('/student/subjectInfo/selectByGradeInfoId'), {
          params: {

          }
        }).then(response => {
          this.studentSubjectList = response.data.data
        })
      },

      lookExam (id) {
        this.$router.push({
          name: 'examReport',
          params:  { id: id }
        })
      }

    }
  }
</script>

<style>

</style>

<style scoped>
  .no_data {
    margin-top: 40px;
    line-height: 300px;
    text-align: center;
    font-size: 20px;
    color: rgb(155, 155, 155);
  }
  .el-row .box-card {
    width: 30% !important;
    display: inline-block !important;
    margin: 15px !important;
  }
  .exam_list {
    width: 100%;
    min-height: 300px;
    display: inline-block;
  }

  .el-pagination {
    margin-top: 20px;
    margin-bottom: 25px;
    text-align: center;
  }

  .subject .on {
    background: rgba(204,136,0,.1);
    color: #c80;
  }

  .subject a {
    font-size: 15px;
    line-height: 40px;
    min-width: 60px;
    padding: 0 15px;
    margin-top: 10px;
    margin-right: 25px;
    float: left;
  }

  .subject a:hover {
    cursor: pointer;
    background: rgba(204,136,0,.1);
    color: #c80;
  }

  .paper {
    cursor: pointer;
  }
  .el-button {
    font-size: 12px;
  }
  .title {
    font-weight: 700;
    font-size: 16px;
  }
  .paper a:hover {
    color: #11a68d;
  }

  .el-table {
    top: 15px;
  }

  .top .item {
    margin-left: 20px;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 5px;
    padding-bottom: 5px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .grid-head{margin-bottom: 30px;}
  .grid-content-right{text-align: right;color:#24794b;}
  .grid-content-right:hover {
    color: #3a8ee6;
    cursor: pointer;
  }
  .grid-content-left{text-align: left;color:#24794b;}
</style>
